<template>
	<view id="all">
		<view id="select" class="second-box">
			<text>标题</text>
			<!-- 搜索框 -->
			<input  maxlength="10" placeholder="最大输入长度为10" />
		</view>
		
		<view id="type" class="second-box">
			<view id="type-tool">
				<view class="types">1</view>
				<view class="types">2</view>
				<view class="types">3</view>
				<view class="types">4</view>
				<view class="types">5</view>
				<view class="types">6</view>
				<view class="types">7</view>
				<view class="types">8</view>
			</view>			
		</view>
		
		<view id="list">
			<view class="picture">1</view>
			<view class="picture">2</view>
			<view class="picture">3</view>
			<view class="picture">4</view>
			<view class="picture">5</view>
			<view class="picture">6</view>
			<view class="picture">7</view>
			<view class="picture">8</view>
			<view class="picture">9</view>
			<view class="picture">10</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
#all{
	display: flex;
	flex-direction: column;
	align-items: center;

}
.second-box{
	width: 750rpx;
}
#select{
	height: 350rpx;
	background-color: aqua;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	input{
		background-color: blue;
		width: 500rpx;
		height: 65rpx;
	}
}

#type{
	height: 350rpx;
	background-color: chartreuse;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	#type-tool{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: brown;
		padding: 10rpx;
		width: 670rpx;
		height: 235rpx;
		.types{
			height: 100rpx;
			width: 150rpx;
			background-color: hotpink;
			margin: 10rpx;
		}
	}

}

#list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 10rpx;
	background-color: blueviolet;
	.picture{
		height: 615rpx;
		width: 345rpx;
		margin: 10rpx;
		background-color: black;
		color:wheat;
	}	
}




</style>
